<template>
    <div class="song-audio">
        <audio ref="player"
            :src="url"
            controls="controls"
            preload="true"
            @canplay="startPlay"
            @ended="ended"
            @timeupdate="timeupdate"></audio>
    </div>
</template>

<script>
import {mapGetters} from 'vuex';
    export default {
        name: "SongAudio",
        computed:{
            ...mapGetters([
                'id',       //歌曲id
                'url',      //歌曲地址
                'isPlay',   //播放状态
                'listOfSongs',  //当前歌曲列表
                'curtime',  //当前音乐的播放位置
                'changeTime',   //指定播放时刻
                'autoNext',     //用于自动触发播放下一首
                'volume'    //音量
            ])
        },
        watch:{
            isPlay: function() {
                this.togglePlay();
            },
            //跳转到指定的播放时刻
            changeTime(){
                this.$refs.player.currentTime = this.changeTime;
            },
            //改变音量
            volume(val){
                this.$refs.player.volume = val;
            }
        },
        methods:{
            //获取连接后准备播放
            startPlay(){
                let player = this.$refs.player;
                //设置播放的时长
                this.$store.commit('setDuration', player.duration);
                //开始播放
                player.play();
                //设置当前的播放状态
                this.$store.commit('setIsPlay', true);
            },
            //播放完成之后触发
            ended(){
                //设置播放状态
                this.$store.commit('setIsPlay', false);
                //设置当前的播放时间
                this.$store.commit('setCurTime', 0);
                //色红孩子是否自动下一首
                this.$store.commit('setAutoNext', !this.autoNext);
                //this.isPlay = false;
            },
            //开始、暂停
            togglePlay(){
                let player = this.$refs.player;
                if(this.isPlay){
                    player.play();
                }else{
                    player.pause();
                }
            },
            //音乐播放时记录音乐的播放位置
            timeupdate(){
                this.$store.commit('setCurTime', this.$refs.player.currentTime);
            }
        }
    }
</script>

<style>
    .song-audio{
        display: none;
    }

</style>